<template>
  <div>
    <van-nav-bar
      title="个人信息"
    />
    <van-form @submit="onSubmit">
      <center>
      <van-image id="hh" round width="5rem" height="5rem" :src="user.urAvatar" />
      </center>
      <van-field
        v-model="user.urNickName"
        name="urNickName"
        label="昵称"
        :rules="[{ required: true, message: '请填写你的名字' }]"
      />
      <van-field v-model="user.urName" name="urName" label="用户名" disabled />
      <van-field v-model="user.urPhone" name="urPhone" label="手机号" />
      <van-field v-model="user.urQq" name="urQq" label="QQ号" />
      <van-field name="urSex" label="性别">
        <template #input>
          <van-radio-group v-model="user.urSex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" @click="onSubmit">
          保存
        </van-button>
      </div>

    </van-form>

    
      <div style="margin: 16px">
        <van-button block round type="info" @click="lookMyOrder(user.urId)">
          查看我的订单
        </van-button>
      </div>
      <div style="margin: 16px">
        <van-button block round type="info" @click="upps">
          修改密码
        </van-button>
      </div>
      <div style="margin: 16px">
        <van-button block round type="danger" color="#FF9D6F" @click="logOut()">
          注销
        </van-button>
      </div>
      <br>
      <br>
      <br>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="search"><a href="https://xiaoqing.work/didi/" id="aa">首页</a></van-tabbar-item>
      <van-tabbar-item @click="rw" icon="friends-o">任务大厅</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="bm">我要帮忙</van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "@/api/index";
export default {
  created() {
    this.updateNew()
  },
  methods: {
    // goIndex(){
    //   location.href("https://xiaoqing.work/didi/")
    // },
    logOut(){
      localStorage.clear();
      this.$router.push("/")
    },
    upps(){
      this.$router.push("/UpData")
    },
    lookMyOrder(urId){
      var _this = this;
      this.$router.push({
        path: "/MyDinDan",
        query: {
          urId: urId,
        },
      });
    },
    rw(){
      this.$router.push("/JieDan")
    },
    bm(){
      this.$router.push("/UF")
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      Toast("按钮");
    },
    onSubmit() {
        api.updata(this.user).then((res) => {
           this.$dialog({
            message: res.data.message,
          });
          this.updateNew()
      });
    },
    updateNew(){
      api.info(this.userID).then((res) => {
      this.user.urName = res.data.data.ddUser.urName;
      this.user.urAvatar = res.data.data.ddUser.urAvatar;
      this.user.urId = res.data.data.ddUser.urId;
      this.user.urPassword = res.data.data.ddUser.urPassword;
      this.user.urPhone = res.data.data.ddUser.urPhone;
      this.user.urQq = res.data.data.ddUser.urQq;
      this.user.urSex = res.data.data.ddUser.urSex;
      this.user.urNickName = res.data.data.ddUser.urNickName;
      localStorage.setItem("userAvatar",this.user.urAvatar);
    });
    }
  },

  data() {
    return {
      active: 3,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      // 取用
      userID: localStorage.getItem("tokenlo"),
      user: {
        urAvatar: "",
        urId: 0,
        urName: "",
        urPassword: "",
        urPhone: "",
        urQq: "",
        urSex: "",
        urNickName:""
      },
    };
  },
};
</script>

<style>
#aa {
  color: #646566;
}
#hh {
  margin-top: 3%;
}
</style>